<template>
  <div>
    <el-tabs value="first" type="card" @tab-click="handleClick">
      <el-tab-pane label="我的订单" name="first">
        <el-collapse v-model="activeName" @change="handleChange" accordion>
          <el-collapse-item
            v-for="(item, index) in orders"
            :key="index"
            :title="`订单${item.id}号`"
            :name="index"
          >
            <div>价格：￥{{ item.price }}</div>
            <div>商品数量：{{ item.num }}</div>
            <div>
              状态：
              <el-steps
                :space="120"
                :align-center="true"
                :active="item.status"
                finish-status="success"
              >
                <el-step title="未确认"></el-step>
                <el-step title="未支付"></el-step>
                <el-step title="未收货"></el-step>
                <el-step title="已结束"></el-step>
              </el-steps>
              <el-button
                v-if="item.status == 0"
                type="info"
                plain
                @click="nextStatus(item)"
                >确认订单</el-button
              >
              <div v-if="item.status == 1">
                <el-button type="primary" plain @click="nextStatus(item)"
                  >支付订单</el-button
                >
                <el-button type="danger" plain @click="lastStatus(item)"
                  >取消订单</el-button
                >
              </div>
              <div v-if="item.status == 2">
                <el-button type="warning" plain @click="nextStatus(item)"
                  >确认收货</el-button
                >
              </div>
              <!-- <div>
                            <el-button type="danger" plain @click="nextStatus(item)"></el-button></el-button>
                        </div> -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="未支付订单" name="second">
        <el-collapse v-model="activePayName" @change="handleChangeNoPay" accordion>
          <el-collapse-item
            v-for="(item, index) in payOrders"
            :key="index"
            :title="`订单${item.id}号`"
            :name="index"
          >
            <div>价格：￥{{ item.price }}</div>
            <div>商品数量：{{ item.num }}</div>
            <div>
              状态：
              <el-steps
                :space="120"
                :align-center="true"
                :active="item.status"
                finish-status="success"
              >
                <el-step title="未确认"></el-step>
                <el-step title="未支付"></el-step>
                <el-step title="未收货"></el-step>
                <el-step title="已结束"></el-step>
              </el-steps>
              <el-button
                v-if="item.status == 0"
                type="info"
                plain
                @click="nextStatus(item)"
                >确认订单</el-button
              >
              <div v-if="item.status == 1">
                <el-button type="primary" plain @click="nextStatus(item)"
                  >支付订单</el-button
                >
                <el-button type="danger" plain @click="lastStatus(item)"
                  >取消订单</el-button
                >
              </div>
              <div v-if="item.status == 2">
                <el-button type="warning" plain @click="nextStatus(item)"
                  >确认收货</el-button
                >
              </div>
              <!-- <div>
                            <el-button type="danger" plain @click="nextStatus(item)"></el-button></el-button>
                        </div> -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="已完成订单" name="third">
        <el-collapse v-model="activeDoneName" @change="handleChangeDone" accordion>
          <el-collapse-item
            v-for="(item, index) in doneOrders"
            :key="index"
            :title="`订单${item.id}号`"
            :name="index"
          >
            <div>价格：￥{{ item.price }}</div>
            <div>商品数量：{{ item.num }}</div>
            <div>
              状态：
              <el-steps
                :space="120"
                :align-center="true"
                :active="item.status"
                finish-status="success"
              >
                <el-step title="未确认"></el-step>
                <el-step title="未支付"></el-step>
                <el-step title="未收货"></el-step>
                <el-step title="已结束"></el-step>
              </el-steps>
              <el-button
                v-if="item.status == 0"
                type="info"
                plain
                @click="nextStatus(item)"
                >确认订单</el-button
              >
              <div v-if="item.status == 1">
                <el-button type="primary" plain @click="nextStatus(item)"
                  >支付订单</el-button
                >
                <el-button type="danger" plain @click="lastStatus(item)"
                  >取消订单</el-button
                >
              </div>
              <div v-if="item.status == 2">
                <el-button type="warning" plain @click="nextStatus(item)"
                  >确认收货</el-button
                >
              </div>
              <!-- <div>
                            <el-button type="danger" plain @click="nextStatus(item)"></el-button></el-button>
                        </div> -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <drawer
      title="测试"
      :visible.sync="drawer"
      width="500px"
      close-on-click-modal
    >
      <el-row>
        <el-col
          :span="12"
          v-for="(item, index) in items"
          :key="index"
          
        >
          <el-card>
            <img :src="item.book.image" class="image" />
            <div style="padding: 14px;">
              <div>{{item.book.name}}</div>
              <div>商品数量：{{item.num}}</div>
              <div>商品总价：{{item.price}}</div>
              <div class="bottom clearfix"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </drawer>
  </div>
</template>

<script>
import { postRequest, myPostRequest } from "../utils/api";
import { putRequest } from "../utils/api";
import { deleteRequest } from "../utils/api";
import { getRequest } from "../utils/api";
import { myGetRequest } from "../utils/api";
import axios from "axios";
export default {
  mounted() {
    let _this = this;
    let userId = _this.$store.state.userId;
    myGetRequest("orderInfo/list?user_id=" + userId).then(resp => {
      // console.log(resp);
      if (resp.data.code == 0) {
        this.orders = resp.data.data;
      } else {
        _this.$message.error("数据加载失败");
      }
    });
    myGetRequest("orderInfo/listWithoutPay?user_id=" + userId).then(resp => {
      // console.log(resp);
      if (resp.data.code == 0) {
        this.payOrders = resp.data.data;
      } else {
        _this.$message.error("数据加载失败");
      }
    });
    myGetRequest("orderInfo/listWithPay?user_id=" + userId).then(resp => {
      // console.log(resp);
      if (resp.data.code == 0) {
        this.doneOrders = resp.data.data;
      } else {
        _this.$message.error("数据加载失败");
      }
    });
  },
  methods: {
    handleChange(val) {
      this.items = [];
      let order = this.orders[val];
      let id = this.orders[val].id;
      this.drawer = true;
      getRequest("orderInfo/getOrderDetails?id=" + id).then(resp => {
        if (resp.data.code == 0) {
        //   console.log("获取到了items数据");
          this.items = resp.data.data.orderItems;
          order.num = this.items.length;
          let money = 0;
          for(let i = 0;i < order.num;i++) {
              money += this.items[i].price;
          }
          order.price = money;
        }
      });
      this.drawer_name = "订单详情"
    },
    handleChangeNoPay(val) {
      this.items = [];
      let order = this.payOrders[val];
      let id = this.payOrders[val].id;
      this.drawer = true;
      getRequest("orderInfo/getOrderDetails?id=" + id).then(resp => {
        if (resp.data.code == 0) {
          this.items = resp.data.data.orderItems;
          order.num = this.items.length;
          let money = 0;
          for(let i = 0;i < order.num;i++) {
              money += this.items[i].price;
          }
          order.price = money;
        }
      });
      this.drawer_name = "未支付订单详情"
    },
    handleChangeDone(val) {
      this.items = [];
      let order = this.doneOrders[val];
      let id = this.doneOrders[val].id;
      this.drawer = true;
      getRequest("orderInfo/getOrderDetails?id=" + id).then(resp => {
        if (resp.data.code == 0) {
          this.items = resp.data.data.orderItems;
          order.num = this.items.length;
          let money = 0;
          for(let i = 0;i < order.num;i++) {
              money += this.items[i].price;
          }
          order.price = money;
        }
      });
      this.drawer_name = "已完成订单详情"
    },
    handleClick() {},
    nextStatus(item) {
      let _this = this;
      if (item.status == 0) {
        // 确认订单
        postRequest("cart/submit", {
          order_id: item.id
        }).then(resp => {
          if (resp.data.code == 0) {
            _this.$message({
              message: "确认订单成功！",
              type: "success"
            });
            item.status += 1;
          } else {
            _this.$message.error("确认订单失败！");
          }
        });
      } else if (item.status == 1) {
        // 支付订单
        this.$confirm("确定进行支付吗？", "支付提示", {
          confirmButtonText: "确认支付",
          cancelButtonText: "取消",
          type: "primary"
        })
          .then(() => {
            getRequest("orderInfo/updateToPay?id=" + item.id).then(resp => {
              if (resp.data.code == 0) {
                item.status += 1;
              } else {
                _this.$message.error(resp.data.msg);
              }
            });
          })
          .catch(() => {
            _this.$message({
              type: "info",
              message: "已取消支付"
            });
          });
      } else if (item.status == 2) {
        // 确认收货
        this.$confirm("确定要进行确认收货操作吗？", "确认收货提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        })
          .then(() => {
            item.status += 1;
          })
          .catch(() => {});
      }
    },
    lastStatus(item) {
      let _this = this;
      this.$confirm("确定要取消订单吗？", "取消订单提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          getRequest("orderInfo/updateToCancel?id=" + item.id).then(resp => {
            if (resp.data.code == 0) {
              this.$message({
                message: "取消订单成功！",
                type: "success"
              });
              item.status -= 1;
            } else {
              _this.$message.error(resp.data.msg);
            }
          });
        })
        .catch(() => {});
    }
  },
  data() {
    return {
      orders: [],
      payOrders: [],
      doneOrders: [],
      activeName: '1',
      activePayName: '1',
      activeDoneName: '1',
      drawer: false,
      items: [],
      drawer_id: 0
    };
  }
};
</script>

<style>
.el-steps {
  margin: 0 auto;
  text-align: center;
  /* width: 591px; */
  width: 321px;
  height: 100;
}

.bottom {
  margin-top: 15x;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
